<template>
  <div>
    <el-table :data="List" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <template v-for="item in Attr">
              <el-form-item :label="item.name">
                <span v-if="item.code != 'img'" style="color: red">{{
                  props.row[item.attr]
                }}</span>
              </el-form-item>
            </template>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="商品名称" prop="bookName"> </el-table-column>
      <el-table-column label="封面" prop="coverPhoto">
        <template slot-scope="scope">
          <img
            width="100"
            height="100"
            :src="`${url}` + `${scope.row.coverPhoto}`"
          />
        </template>
      </el-table-column>
      <el-table-column label="上架时间" prop="addedTime"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: localStorage.getItem("url"),
    };
  },
  props: ["List", "Attr"],
  // mounted() {
  //   console.log(
  //     "myTable2 - > mounted: List.coverPhoto",
  //     this.List[0].coverPhoto
  //   );
  // },
  methods: {
    message(param) {
      this.$confirm("此操作将是永久性的, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("param=", param);

          this.$axios
            .get("sys/book/deleteById?bookId=" + param.bookId)
            .then(({ data }) => {
              if (data.code == 201) {
                this.$message({
                  type: "success",
                  message: "成功!",
                });
                this.$emit("refresh");
              }
            });

          //   if (success) {
          //     console.log("success:存在");
          //     if (param) {
          //       console.log("param:存在");
          //       success(param);
          //     } else {
          //       console.log("param:不存在");
          //       success;
          //     }
          //   }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    handleEdit(obj) {
      console.log("handleEdit:", obj);
      this.$emit("edit", obj);
    },
    // deleted(obj) {
    //   console.log("deleted:", obj);
    //   this.$emit("deleted", obj);
    // },
    // handleDelete(obj) {
    //   console.log("handleDelete:", obj);
    //   this.message(this.deleted, obj);
    // },
    handleDelete(obj) {
      console.log("handleDelete:", obj);
      this.message(obj);
    },
  },
};
</script>

<style lang='less' scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>